<template>
  <a-modal v-model:open="visible" :maskClosable="false" v-bind="$attrs" @cancel="handleClosed" :width="400">
    <div class="modal-default-title">
      <span>{{ title }}</span>
    </div>
    <div class="modal-body">
      <a-checkbox v-model:checked="checked"> 我确定退出此共享文件夹 </a-checkbox>
    </div>

    <template #footer>
      <button class="delete-cancel-share" @click="handleClosed">取消</button>
      <button
        :class="!disabled ? 'ant-btn delete-share' : 'ant-btn is-disabled'"
        iconsize="15"
        isupload="false"
        :disabled="disabled"
        type="button"
        @click="handleOk"
      >
        <span>退 出</span>
      </button>
    </template>
  </a-modal>
</template>
<script lang="ts">
  import { defineComponent, ref, computed } from 'vue';
  import { useUserStore } from '/@/store/modules/user';
  import { deleteAuth } from '../files.api';

  export default defineComponent({
    name: 'FolderExitModal',
    emits: ['success', 'closed'],
    setup(props, { emit }) {
      const userStore = useUserStore();
      //当前用户ID
      const userId = userStore.getUserInfo.id;

      //弹窗显隐标记
      const visible = ref(false);
      //数据信息
      const dataModal = ref();
      //标题
      const title = ref('');
      //确认删除勾选
      const checked = ref(false);

      //计算删除宾馆是否生效
      const disabled = computed(() => {
        return !checked.value;
      });

      //显示modal
      function showModal(record) {
        dataModal.value = { ...record };
        visible.value = true;
        title.value = '退出共享文件夹"' + dataModal.value.fileName + '"';
        checked.value = false;
      }

      //关闭后的回调
      function handleClosed() {
        visible.value = false;
        emit('closed');
      }

      async function handleOk() {
        const params = { fileId: dataModal.value.fileId, userId: userId };
        await deleteAuth(params, function () {
          visible.value = false;
          emit('success');
        });
      }

      return {
        visible,
        checked,
        disabled,
        title,
        showModal,
        handleClosed,
        handleOk,
      };
    },
  });
</script>
